<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="contentLeft">
        <!-- 机构概述 -->
        <jigougaisu />
      </div>
      <!-- 今日数据 -->
      <div class="contentRight">
        <jinrishuju />
      </div>

    </div>

    <div class="container" style="height: 320px;">
      <div class="contentLeft" style="height: 320px;">
        <daibanrenwu />
      </div>
      <div class="contentRight" style="height: 320px;">
        <zhixingzhong />
      </div>
    </div>
    <div class="full">
      <changyong />
    </div>
    <div class="container" style="height:490px">
      <div class="contentLeft" style="width: 45%; height:490px">
        <xianluguanli />
      </div>

      <div class="contentRight" style="width: 53%; height:490px">
        <yunshurenwu />
      </div>
    </div>
    <div class="container" style="height:660px">
      <div class="contentLeft" style="width: 45%; height:610px">
        <dingdanzongliang />
      </div>

      <div class="contentRight" style="width: 53%; height:610px">
        <ddfenbu />
      </div>
    </div>

    <div class="footer">
      <footerVue />
    </div>

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

import footerVue from './compoments/footer'
import jinrishuju from './compoments/jinrishuju.vue'
import jigougaisu from './compoments/jigougaisu'
import daibanrenwu from './compoments/daibanrenwu'
import zhixingzhong from './compoments/zhixingzhong'
import changyong from './compoments/changyong'
import xianluguanli from './compoments/xianluguanli'
import yunshurenwu from './compoments/yunshurenwu'
import dingdanzongliang from './compoments/dingdanzongliang'
import ddfenbu from './compoments/ddfenbu'
export default {
  name: 'Dashboard',
  components: {
    footerVue,
    jinrishuju,
    jigougaisu,
    daibanrenwu,
    zhixingzhong,
    changyong,
    xianluguanli,
    yunshurenwu,
    dingdanzongliang,
    ddfenbu
  },
  data() {
    return {
      listData: {
        backlog: {},
        orderLineChart: {},
        organOverview: {},
        todayData: {},
        transportTaskList: {}

      }

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  async created() {
    this.getData()
  },
  methods: {
    ...mapActions('dashboard', ['getData'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  position: relative;
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.full{
  margin-bottom: 20px;;
background-color: #fff;
height: 190px;
width: 100%;
padding: 10px;
}
.container{
  box-sizing: border-box;
height: 235px;
margin-bottom: 20px;
background-color: #f3f5f9;

.header{
  width: 100%;
  h4{
    margin: 0;
  }
}

.contentLeft{
  float: left;
  padding: 10px;
  height: 100%;
  background-color: #fff;
width: 59%;
}
.contentRight{
width: 39%;
padding: 10px;
margin-left: 8px;
height: 100%;
float: right;
background-color: #ffffff;

}
}
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
